<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>父组件</h1>
			{{message}}
			<hr>
			<h2>子组件</h2>
			<custom :title.sync="message"></custom>
			<custom :test-title="message" @abc="value => message = value"></custom>
			<custom :test-title.sync="message" :title.sync="message"></custom>
		</div>
		<script>
			/*
				属性加上一个修饰符
					.sync
			*/
			Vue.component('custom', {
				props:{
					title: {
						type: [String,Number],
						default: 'hello'
					},
					testTitle: {
						type: String
					}
				},
				template: `<div>
					<h2>{{title}}</h2>
					<button @click="changeTitle">改变</button>
					<button @click="changeTestTitle">改变testTitle</button>
				</div>`,
				methods: {
					changeTitle () {
						//this.title = '更改'
						this.$emit('update:title','更改')
					},
					changeTestTitle () {
						//this.$emit('abc', '改变了')
						this.$emit('update:testTitle','有一次了更改')
						this.$emit('update:title','有一次了更改')
					}
				}

			});

			new Vue({
				el: '#app',
				data:{
					message: '父级的数据'
				}
			})

		</script>
	</body>
</html>